import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class index extends Component {

  search = async() => {
    // 获取用户的输入（连续解构赋值+重命名）
    const {keyWordElement:{value:keyWord}} = this
    // 发送请求前通知 List 更新状态
    PubSub.publish('list', {isFirst:false, isLoading:true})

    //#region 
   /*  // 发送网络请求---使用 axios 发送
    axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        // 请求成功后通知 List 更新状态
        PubSub.publish('list', {isLoading:false, users:response.data.items})
      },
      error => {
        // 请求失败后通知 List 更新状态
        PubSub.publish('list', {isLoading:false, err:error.message})
      }
    ) */
    //#endregion

    // 发送网络请求---使用 fetch 发送（未优化）
    /* fetch(`/api1/search/users?q=${keyWord}`).then(
      response => {console.log('联系服务器成功了')
      return response.json()
    },
      error => {
        console.log('联系服务器失败了', error)
        return new Promise(() => {})
    }
    ).then(
      response => {console.log('获取数据成功了', response);},
      error=> {console.log('获取数据失败了', error);}
    ) */

    // 发送网络请求---使用 fetch 发送（优化1）
    /* fetch(`/api1/search/users?q=${keyWord}`).then(
      response => {console.log('联系服务器成功了')
      return response.json()
    },
    ).then(
      response => {console.log('获取数据成功了', response);},
    ).catch(
      error => {console.log('请求出错', error);}
    ) */

    // 发送网络请求---使用 fetch 发送（优化2）
    try {
      const response = await fetch(`/api1/search/users?q=${keyWord}`)
      const data = await response.json()
      // 请求成功后通知 List 更新状态
      PubSub.publish('list', {isLoading:false, users:data.items})
    } catch (error) {
      console.log('请求出错', error)
      // 请求失败后通知 List 更新状态
      PubSub.publish('list', {isLoading:false, err:error.message})
    }
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search"/>&nbsp;
          <button onClick={this.search}>Search</button>
        </div>
     </section>
    )
  }
}
